<template>
	<view class="result-tab" :class="{paddingBottom:(!isPop&&!isPriceRangePop)}">
		<view class="uni-flex uni-row" style="align-items: center;">
			<view class="uni-flex uni-row flex-item" :class="{ 'pitch-on-tab': sortType === 2 }" @tap="selectionTab(2)">
				<view class="tab-text">新品</view>
			</view>
			<view class="uni-flex uni-row flex-item" :class="{ 'pitch-on-tab': sortType === 1 }" @tap="selectionTab(1)">
				<view class="tab-text">销量</view>
			</view>
			<view class="uni-flex uni-row flex-item" :class="{ 'pitch-on-tab':(sortType === 3 || sortType === 4) }" @tap="selectionTab(3)">
				<view class="tab-text">价格</view>
				<view class="uni-flex uni-column" style="padding-left: 1px;">
					<view class="arrow-up" v-if="sortType != 4"></view>
					<view style="height: 2px;"></view>
					<view class="arrow-down" v-if="sortType != 3"></view>
				</view>
			</view>
			<view class="uni-flex uni-row flex-item" :class="{ 'pitch-on-tab': isPriceRangePop }" @tap="openPriceRangePop">
				<view class="tab-text">价格区间</view>
				<view class="uni-flex uni-column" style="padding-left: 1px;">
					<view class="arrow-up" v-if="isPriceRangePop" :class="{ 'pitch-on-tab-arrow': isPriceRangePop }"></view>
					<view class="arrow-down" v-if="!isPriceRangePop"></view>
				</view>
			</view>
			<!-- <view style="width:1px;height:14px;background: #979797;"></view> -->
		</view>
		<view style="white-space: nowrap;padding: 0 16rpx;" v-if="!isPriceRangePop">
			<view class="screen-item" @click="clickCategory(brandList,2)"><text class="normal-text" :class="[{selected:beingBrand},{'drop-down':(isPop && screenType===2)}]">{{brandName==''?'品牌':brandName}}<text
					 class="icon"></text></text></view>
			<view class="screen-item" @click="clickCategory(categoryList,3)"><text class="normal-text" :class="[{selected:beingCategory},{'drop-down':(isPop && screenType===3)}]">{{categoryName==''?'分类':categoryName}}<text
					 class="icon"></text></text></view>
		</view>
		<view class="pop" v-show="isPop">
			<view class="pop-item" v-for="(item, index) in popList" :key="index">
				<view class="pop-item-value" :class="{on:item.checked}" @tap="checkedItem(index)">
					<text class="icon"></text>{{item.categoryName==null?'':item.categoryName}}
					{{item.brandName==null?'':item.brandName}}
				</view>
			</view>
		</view>
		<view class="uni-flex uni-row price-range" v-if="isPriceRangePop">
			<view class="price-range-item flex" style="justify-content: flex-start;">
				<div class="price-range-bg">
					<input class="price-range-input" name="input1" type="number" @input="inputMinPrice($event.target)" placeholder="最低价"
					 maxlength="7" v-model="minPrice" />
				</div>
			</view>
			<view class="price-range-item" style="padding: 0 16rpx;">
				<view class="line"></view>
			</view>
			<view class="price-range-item flex" style="justify-content: flex-end;">
				<div class="price-range-bg">
					<input class="price-range-input" name="input2" type="number" @input="inputMaxPrice($event.target)" placeholder="最高价"
					 maxlength="7" v-model="maxPrice" />
				</div>
			</view>
		</view>
		<view v-show="isPop || isPriceRangePop" class="uni-flex pop-button">
			<view class="button-reset" @tap="popButtonReset">重置</view>
			<view class="button-submit" @tap="popButtonSubmit">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isShowError: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				popList: [], //弹框数据
				isPop: false, //搜索条件弹窗
				isPriceRangePop: false, //价格区间弹窗
				minPrice: '',
				maxPrice: '',
				sortType: null, //1：销量降序，2：更新时间，3：价格升序， 4：价格降序
				brandList: [], //品牌ID列表
				brandName: '品牌',
				beingBrand: false, //是否有选中品牌
				categoryList: [], //分类属性
				categoryName: '分类',
				beingCategory: false, //是否有选中分类属性
				screenType: 0, //0 其它 1价格区间 2品牌 3分类 
				valueMaxLength:10,//显示最长字节
			};
		},
		methods: {
			//更新 品牌
			setBrand(brandList, originalList) {
				this.brandList = JSON.parse(JSON.stringify(brandList));
				//数据初始化
				if (originalList != null && originalList.length > 0) {
					for (let i = 0; i < originalList.length; i++) {
						for (let j = 0; j < this.brandList.length; j++) {
							if (originalList[i] == this.brandList[j].brandId) {
								this.brandList[j].checked = true;
								break;
							}
						}
					}
				}
				this.brandName = '';
				this.beingBrand = false;
				for (let i = 0; i < this.brandList.length; i++) {
					if (this.brandList[i].checked) {
						this.beingBrand = true;
						if (this.brandName === '') {
							this.brandName = this.brandList[i].brandName;
						} else {
							this.brandName = this.brandName + ',' + this.brandList[i].brandName;
						}
					}
				}
				this.brandName = this.sliceName(this.brandName);
			},
			//更新 分类
			setCategory(categoryList, originalList) {
				this.categoryList = JSON.parse(JSON.stringify(categoryList));

				//数据初始化
				if (originalList != null && originalList.length > 0) {
					for (let i = 0; i < originalList.length; i++) {
						for (let j = 0; j < this.categoryList.length; j++) {
							if (originalList[i] == this.categoryList[j].categoryId) {
								this.categoryList[j].checked = true;
								break;
							}
						}
					}
				}
				this.categoryName = '';
				this.beingCategory = false;
				for (let i = 0; i < this.categoryList.length; i++) {
					if (this.categoryList[i].checked) {
						this.beingCategory = true;
						if (this.categoryName === '') {
							this.categoryName = this.categoryList[i].categoryName;
						} else {
							this.categoryName = this.categoryName + ',' + this.categoryList[i].categoryName;
						}
					}
				}
				this.categoryName = this.sliceName(this.categoryName);

			},//截取字符
			sliceName(name){
				return name.length > this.valueMaxLength ? name.slice(0, this.valueMaxLength) + '...' : name;
			},
			//打开分类下拉框
			clickCategory(data, screenType) {
				if (this.popList.length > 0 && this.isPop && this.screenType === screenType) {
					this.isPop = false;
					this.$emit('setMask', this.isPop);
				} else {
					this.popList = JSON.parse(JSON.stringify(data));
					if (this.popList.length > 0) {
						this.isPop = true;
						this.isPriceRangePop = false;
						this.$emit('setMask', this.isPop);
					} else {
						this.$utils.toast('暂无选项！');
					}
				}
				this.screenType = screenType;
			}, //下拉框操作
			checkedItem(index) {
				//所有类型单选
				this.popList[index].checked = !this.popList[index].checked;
				this.$forceUpdate();
			},
			//清除小数点
			inputMinPrice(target) {
				var context = this;
				setTimeout(function() {
					if (!/^\d+$/.test(target.value)) {
						context.minPrice = context.minPrice.replace(/[^\d]/g, '');
					}
				}, 100);
			},
			inputMaxPrice(target) {
				var context = this;
				setTimeout(function() {
					if (!/^\d+$/.test(target.value)) {
						context.searchCondition.maxPrice = context.searchCondition.maxPrice.replace(/[^\d]/g, '');
					}
				}, 1);
			}, //0：综合排序，1：销量降序，2：更新时间，3：价格升序， 4：价格降序
			selectionTab(sortType) {
				if (sortType == 3) {
					this.sortType = this.sortType == 3 ? 4 : 3;
				} else {
					this.sortType = sortType;
				}
				this.screenType = 0;
				this.hideAllPop();
				this.popButtonSubmit();
			}, //打开价格弹窗
			openPriceRangePop() {
				this.isPriceRangePop = !this.isPriceRangePop;
				if (this.isPriceRangePop) {
					this.screenType = 1;
				}
				this.isPop = false;
				this.$emit('setMask', this.isPriceRangePop);

			}, //同步弹窗
			setPopupSyn(value) {
				this.isPop = value;
				this.isPriceRangePop = value;
				// this.$emit('setPopupSyn', value);
			}, //隐藏所有弹窗
			hideAllPop() {
				this.isPop = false;
				this.isPriceRangePop = false;
				this.$emit('setMask', false);
			}, //下拉框，重置按钮
			popButtonReset() {
				if (this.isPriceRangePop) {
					this.minPrice = '';
					this.maxPrice = '';
				} else {
					for (let item of this.popList) {
						item.checked = false;
					}
					this.$forceUpdate();
				}

			},
			//下拉框，确认按钮
			popButtonSubmit() {
				//筛选标示 1咪咕精选 2品牌 3分类 10+n筛选属性
				switch (this.screenType) {
					case 1:
						var obj = {
							maxPrice: this.maxPrice,
							minPrice: this.minPrice
						}
						this.$emit('synScreenData', {
							screenType: this.screenType,
							data: obj,
						})
						break;
					case 2:
						this.brandName = '';
						this.beingBrand = false;
						for (let i = 0; i < this.popList.length; i++) {
							for (let j = 0; j < this.brandList.length; j++) {
								if (this.popList[i].brandId === this.brandList[j].brandId) {
									this.brandList[j].checked = this.popList[i].checked;
									break;
								}
							}
							if (this.brandList[i].checked) {
								if (this.brandName === '') {
									this.brandName = this.brandList[i].brandName;
								} else {
									this.brandName = this.brandName + ',' + this.brandList[i].brandName;
								}
								this.beingBrand = true;
							}
						}
						this.brandName = this.sliceName(this.brandName);
						this.$emit('synScreenData', {
							screenType: this.screenType,
							data: this.brandList,
						})
						break;
					case 3:
						this.categoryName = '';
						this.beingCategory = false;
						for (let i = 0; i < this.popList.length; i++) {
							for (let j = 0; j < this.categoryList.length; j++) {
								if (this.popList[i].categoryId === this.categoryList[j].categoryId) {
									this.categoryList[j].checked = this.popList[i].checked;
									break;
								}
							}
							if (this.categoryList[i].checked) {
								if (this.categoryName === '') {
									this.categoryName = this.categoryList[i].categoryName;
								} else {
									this.categoryName = this.categoryName + ',' + this.categoryList[i].categoryName;
								}
								this.beingCategory = true;
							}
						}
						this.categoryName = this.sliceName(this.categoryName);
						this.$emit('synScreenData', {
							screenType: this.screenType,
							data: this.categoryList,
						})
						break;
					default:
						var obj = {
							sortType: this.sortType,
						}
						this.$emit('synScreenData', {
							screenType: this.screenType,
							data: obj,
						})
						break;
				}
				this.hideAllPop();
			}
		}
	}
</script>

<style lang="scss">
	.result-tab {
		width: 100%;
		position: fixed;
		background: #fff;
		box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
		z-index: 2;
		border-radius: 0px 0px 20rpx 20rpx;
	}

	.flex-item {
		width: 24%;
		text-align: center;
		margin: 8px 0;
		font-family: PingFangSC-Semibold;
		font-weight: 500;
		justify-content: center;
		align-items: center;
		color: #333333;
	}

	.tab-text {
		font-size: 16px;
	}

	.pitch-on-tab {
		color: #ff004f;
	}

	/*箭头向上*/
	.arrow-up {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid #666666;
	}

	.pitch-on-tab .arrow-up {
		border-bottom: 5px solid #ff004f;
	}

	.arrow-up.pitch-on-tab-arrow {
		border-bottom: 5px solid #ff004f;
	}

	/*箭头向下*/
	.arrow-down {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #666666;
	}

	.pitch-on-tab .arrow-down {
		border-top: 5px solid #ff004f;
	}

	.arrow-down.pitch-on-tab-arrow {
		border-top: 5px solid #ff004f;
	}

	.screen-item {
		display: inline-block;
		margin: 14rpx 8rpx 0 8rpx;
		width: 342rpx;
		text-align: center;
		.normal-text {
			width: 342rpx;
			padding: 14rpx 0rpx 12rpx 0rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			background: rgba(242, 242, 242, 1);
			border-radius: 32rpx;
			display: inline-block;
			text-align: center;

			text {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.icon {
				width: 16rpx;
				height: 16rpx;
				margin-left: 12rpx;
				background: url('https://ss.migudm.cn/malleoc/img/search/ic_search_zhankai_black.png') no-repeat center center;
				background-size: 100%;
				display: inline-block;
				vertical-align: middle;
			}
		}

		.limit-with {
			max-width: 120rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: table-cell;
		}

		.selected {
			color: rgba(255, 0, 79, 1);
			background: rgba(255, 255, 255, 1);
			border-radius: 32rpx;
			border: 1px solid rgba(255, 0, 79, 1);

			.icon {
				background: url('https://ss.migudm.cn/malleoc/img/search/ic_search_shouqi.png') no-repeat center center;
				background-size: 100%;
				display: inline-block;
				vertical-align: middle;
			}
		}

		.drop-down {
			padding-bottom: 24rpx;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
			color: rgba(51, 51, 51, 1);
			background: rgba(242, 242, 242, 1);
			border: 0px;

			.icon {
				background: url('https://ss.migudm.cn/malleoc/img/search/ic_search_shouqi_black.png') no-repeat center center;
				background-size: 100%;
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	.pop {
		max-height: 450rpx;
		width: 100%;
		background: rgba(242, 242, 242, 1);
		display: block;
		-webkit-overflow-scrolling: touch;
		overflow: scroll;
		// overflow: hidden;

		.pop-item {
			width: 50%;
			float: left;
			-webkit-overflow-scrolling: touch;

			.pop-item-value {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				padding: 24rpx 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.on {
				font-weight: 600;
				color: rgba(51, 51, 51, 1);

				.icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 6rpx;
					background: url('https://ss.migudm.cn/malleoc/img/search/ic_search_shaixuan_sel.png') no-repeat center center;
					background-size: 100%;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}
	}

	.pop-button {
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;

		.button-reset {
			height: 100rpx;
			line-height: 100rpx;
			flex: 1;
			color: rgba(51, 51, 51, 1);
			background: rgba(255, 255, 255, 1);
			border-radius: 0px 0px 0px 20rpx;
		}

		.button-submit {
			height: 100rpx;
			line-height: 100rpx;
			flex: 1;
			color: rgba(255, 255, 255, 1);
			background: rgba(255, 0, 79, 1);
			border-radius: 0px 0px 20rpx 0px;
		}
	}

	.price-range {
		margin: 20rpx 0rpx;
		justify-content: center;

		.price-range-bg {
			width: 320rpx;
			//height: 64rpx;
			background: #f3f3f3;
			border-radius: 64rpx;

		}

		.price-range-item {
			display: flex;
			text-align: center;
			justify-content: center;
			align-items: center;

			.line {
				background: #979797;
				width: 15px;
				height: 1px;
			}
		}

		.price-range-input {
			margin: 16rpx 0;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			// line-height: 64rpx;
		}
	}


	.paddingBottom {
		padding-bottom: 24rpx;
	}
</style>
